<template>
  <div class="test" style="width: 100%; margin-right: 20px; height:  400px;; float: right">
    <div id="PieWithScrollableLegend" style="width: 100%; height: 100%;"></div>
  </div>
</template>

<script>
export default {
  name: "PieWithScrollableLegend",
  data() {
    return {};
  },
  methods: {
    //每个用户发表的项目数量-饼状图
    getDataList() {
      this.$http.post("/count/PieWithScrollableLegend").then((res) => {
        this.PieWithScrollableLegend(res)
        console.log(res)
      });
    },
    PieWithScrollableLegend: function (data) {
      const chart = this.$echarts.init(document.getElementById('PieWithScrollableLegend'))
      chart.setOption({
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: data
            //   [
            //   { value: 1048, name: 'Search Engine' },
            //   { value: 735, name: 'Direct' },
            //   { value: 580, name: 'Email' },
            //   { value: 484, name: 'Union Ads' },
            //   { value: 300, name: 'Video Ads' }
            // ]
          }
        ]
      });
    }
  },
  mounted() {
    this.getDataList();
  },
};
</script>
